<template>
	<view>
		<u-navbar safeAreaInsetTop fixed placeholder>
			<u-tabs class="uTabsClass" :list="listTop" @click="click" slot='center'></u-tabs>
			<view slot="left">

			</view>
		</u-navbar>

		<view class="search-wrap">
			<u-search height="32" bg-color='#fff' placeholder="搜索客户" :show-action="false" :action-style="{color: '#fff'}"
				@change="search" v-model="keyword"></u-search>
			<own-select></own-select>
		</view>




		<view class="customersThreadTop" :style="{'height':navTopHeight +'px'}">

			<scroll-view v-show="current==0" scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"
				refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="45"
				refresher-background="transparent" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort">
				<view class="viewWrap">
					<view class="page-box" id="tabInList">
						<view class="order" @click="goDetail(res)" v-for="(res, index) in goods" :key="index">
							<view class="top">
								<view class="left">
									<u-icon name="star" color="#ff9900"></u-icon>
									<view class="store">刘海涛{{index}}</view>
									<u-tag text="一般意向" size='mini' type="primary" class="activeClass" plain />
									<u-tag text="问询" size='mini' type="primary" class="activeClass" plain />

								</view>
								<view class="right">
									<u-icon @click="clickPhone" name="phone-fill" color="#19be6b">
									</u-icon>
									<u-icon class="u-margin" name="more-dot-fill" color="#303133">
									</u-icon>
								</view>
							</view>

							<view class="centers">

								<view class="textName">18738161475</view>
								<u-tag text="来访客户" size='mini' type="info" plain />
							</view>
							<view class="bottom">
								<view class="left">
									<view class="u-tips-color">2021.12.08 主动电访</view>
								</view>

								<view class="u-tips-color">
									高
								</view>

							</view>


						</view>
						<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>


					</view>

				</view>
			</scroll-view>





			<scroll-view v-show="current==1" scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
				<view class="viewWrap">
					<view class="page-box" id="tabInList">
						<view class="order" v-for="(res, index) in goods" :key="index">
							<view class="top">
								<view class="left">
									<u-icon name="star" color="#ff9900"></u-icon>
									<view class="store">赵岩{{index}}</view>
									<u-tag text="一般意向" size='mini' type="primary" class="activeClass" plain />
									<u-tag text="问询" size='mini' type="primary" class="activeClass" plain />

								</view>
								<view class="right">
									<u-icon @click="clickPhone" name="phone-fill" color="#19be6b">
									</u-icon>
									<u-icon class="u-margin" name="more-dot-fill" color="#303133">
									</u-icon>
								</view>
							</view>

							<view class="centers">

								<view class="textName">18738161475</view>
								<u-tag text="来访客户" size='mini' type="info" plain />
							</view>
							<view class="bottom">
								<view class="left">
									<view class="u-tips-color">2021.12.08 主动电访</view>
								</view>

								<view class="u-tips-color">
									高
								</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="addButton" @click.stop="goAdd()">
			<u-icon name="plus" color="#fff" size="20"></u-icon>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				triggered: false,
				current: 0,
				navTopHeight: null,
				navbarHeight: null,
				keyword: '',
				goods2: [],
				goods: [],
				listTop: [{
						name: '客户'
					},
					{
						name: '线索'
					}
				],
				loadStatus: 'loadmore',
			}
		},


		created() {

			this._freshing = false;
			this.triggered = true;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
			this.getOrderList(0);
		},
		mounted() {
			this.setNavTop()
		},


		// onPageScroll(e) {
		// 	/*吸顶悬浮，上拉加载，下拉刷新组件*/
		// 	if (e.scrollTop >= this.navTop) {
		// 		this.isShowSticky = true // 显示悬浮菜单
		// 	} else {
		// 		this.isShowSticky = false // 隐藏悬浮菜单
		// 	}
		// 	/*吸顶悬浮，上拉加载，下拉刷新组件end*/
		// },

		methods: {
			goDetail(res) {
				console.log('222')
				uni.navigateTo({
					url: '/pages/customersThread/customersDetail'
				});
			},
			goAdd(res) {
				uni.navigateTo({
					url: '/pages/customersThread/customersAdd'
				});
			},
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			click(item) {
				console.log('item', item);
				this.current = item.index
			},
			reachBottom() {
				// 此tab为空数据

				this.loadStatus = "loading"
				setTimeout(() => {
					this.getOrderList(this.current);
				}, 1200);

			},


			// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
			setNavTop() {

				// uniapp的方法
				let _this = this

				setTimeout(() => {
					uni.getSystemInfo({
						success: function(res) { // res - 各种参数
							const query = uni.createSelectorQuery().in(_this);
		
							query.select('.customersThreadTop').boundingClientRect(function(
								data) { // data - 各种参数
								_this.navTopHeight = res.windowHeight - data.top  - 10 // 到屏幕顶部的距离

							}).exec()
						}
					})
				}, 100)





			},


			clickPhone() {
				uni.makePhoneCall({
					phoneNumber: '18738161475' //仅为示例
				});
			},
			search(val) {
				console.log(val)
			},

			// 页面数据
			getOrderList() {
				if (this.goods.length > 20) {
					this.loadStatus = "nomore"

				} else {
					for (let i = 0; i < 8; i++) {
						this.goods.push(i);
					}
					this.loadStatus = "loadmore"
				}

			}
		}
	}
</script>


<style lang="scss" scoped>
	.addButton {
		border-radius: 100px;
		background-color: rgb(41, 121, 255);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		position: fixed;
		z-index: 10;
		bottom: 180rpx;
		right: 20rpx;
	}

	.uTabsClass {
		width: 100%;
	}

	.viewWrap {
		overflow-y: auto;
	}

	// .scroll-Y{
	// 	height: calc(100vh - var(--window-top));
	// }
	.activeClass {
		margin-right: 10rpx;
	}

	.swiperBar {
		width: 100%;
	}

	.search-wrap {
		box-sizing: border-box;
		padding: 20rpx 20rpx;

	}

	.page-box {
		padding: 0 20rpx;
	}

	.order {
		background-color: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
				}
			}

			.right {
				display: flex;

				.u-margin {
					margin-left: 30rpx;
				}

			}

		}

		.centers {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			.textName {
				margin-right: 20rpx;
			}

		}

		.bottom {
			margin-top: 15px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}

	.customersThreadTop {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
